<template>
	<div class="page-container">
		<el-card class="page-form-card">
			<el-form ref="ruleForm" :model="form" :rules="rules" label-width="90px" status-icon>
				<el-form-item label="用户类型:" prop="userType">
					<el-radio-group v-model="form.userType">
						<el-radio :label="1">供应商商家</el-radio>
						<el-radio :label="2">用户</el-radio>
						<el-radio :label="3">店铺商家</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="充值类型:" prop="reChargeType">
					<el-radio-group v-model="form.reChargeType">
						<el-radio v-if="form.userType === 1 || form.userType === 3" :label="1">余额</el-radio>
						<el-radio v-if="form.userType === 2" :label="2">消费券</el-radio>
						<el-radio v-if="form.userType === 2" :label="3">提货单</el-radio>
						<el-radio v-if="form.userType === 2" :label="4">代采购额度</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="用户ID:" prop="uuid">
					<el-input v-model.trim="form.uuid" class="!w-[204px]" placeholder="请输入用户ID" maxlength="6" show-word-limit @change="getUserInfo"></el-input>
					<div v-if="!flag && mobile" class="tips"><span>手机号：</span>{{ mobile }}</div>
					<div v-if="flag" class="tips">暂无用户</div>
				</el-form-item>
				<el-form-item label="类型:" prop="type">
					<el-radio-group v-model="form.type">
						<el-radio :label="1">增加</el-radio>
						<el-radio :label="2">减少</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="调整金额:" prop="value">
					<el-input-number v-model="form.value" :min="0.01" :precision="2" :step="1"></el-input-number>
				</el-form-item>
				<el-form-item label="说明:" prop="remark">
					<el-input v-model.trim="form.remark" class="!md:w-[302px]" :rows="7" maxlength="100" show-word-limit placeholder="请输入说明" type="textarea"></el-input>
				</el-form-item>

				<el-form-item>
					<el-button class="w-[107px] !h-[40px]" type="primary" @click="submit">提交</el-button>
				</el-form-item>
			</el-form>
		</el-card>
	</div>
</template>

<script>
import { getUser, recharge } from '@/api/mall/topup';

export default {
	name: 'TopUp',
	data() {
		return {
			form: {
				userType: 1,
				reChargeType: 1,
				value: 1,
				type: 1,
				id: '',
				remark: '',
			},
			rules: {
				uuid: [
					{ required: true, message: '请输入用户ID', trigger: 'blur' },
					{ min: 6, max: 6, message: '请输入6位数的用户ID', trigger: 'blur' },
				],
				userType: [{ required: true, message: '请选择用户类型', trigger: 'change' }],
				reChargeType: [{ required: true, message: '请选择充值类型', trigger: 'change' }],
				type: [{ required: true, message: '请选择类型', trigger: 'change' }],
				value: [{ required: true, message: '请输入调整金额', trigger: 'blur' }],
				remark: [{ required: true, message: '请输入说明', trigger: 'blur' }],
			},
			mobile: '',
			flag: false,
		};
	},
	methods: {
		submit() {
			this.$refs.ruleForm.validate((valid) => {
				if (valid) {
					if (!this.mobile) {
						this.$message.error('用户不存在');
						return;
					}
					let str = '';

					if (this.form.type === 1) {
						str = '是否给用户充值?';
					}
					if (this.form.type === 2) {
						str = '是否减少用户余额?';
					}
					this.$confirm(str, '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning',
					}).then(() => {
						recharge(this.form).then((res) => {
							if (res.data.code === 200) {
								this.$message.success('操作成功!');
								this.clearForm();
							} else {
								this.$message.error(res.data.msg);
							}
						});
					});
				} else {
					return false;
				}
			});
		},
		clearForm() {
			this.mobile = false;
			this.$refs.ruleForm.resetFields();
		},
		getUserInfo() {
			if (this.form.uuid.length !== 6) return;
			getUser({
				id: this.form.uuid,
			}).then((res) => {
				if (res.data) {
					this.mobile = res.data.mobile ? res.data.mobile : '暂无手机号';
				}
				this.flag = !res.data;
			});
		},
		submitForm() {},
	},
};
</script>

<style lang="scss" scoped>
.content {
	.form {
		width: 600px;
		margin: 40px auto 0;

		.tips {
			height: 31px;
			background: #f7f7f7;
			border-radius: 0 0 4px 4px;
			line-height: 31px;
			color: #f14a46;
			padding-left: 16px;

			span {
				color: #808a97;
			}
		}
	}

	.title {
		font-size: 18px;
		font-weight: bold;
		padding-left: 26px;
		padding-top: 25px;
	}
}

::v-deep .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before {
	content: '' !important;
}
</style>
